<template>
<el-drawer :title="formDrawer.title" :visible.sync="formDrawer.visible" size="30%" direction="rtl" custom-class="drawer-right-side" :before-close="closeDrawer" :append-to-body="true">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="top" class="ruleForm">
        <el-form-item label="咨询门店" prop="store_id" :rules="[{required: true, message: '请选择门店'}]">
            <picker-view v-model="ruleForm.store_id" type="store" placeholder="请选择门店"></picker-view>
        </el-form-item>

        <el-form-item label="预约时间" prop="invite_time" :rules="[{required: true, message: '请选择预约时间'}]">
            <el-date-picker class="w100" type="datetime" v-model="ruleForm.invite_time" placeholder="请选择预约时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
            <el-input v-model="ruleForm.remark" type="textarea" placeholder="备注"></el-input>
        </el-form-item>

        <div class="fixed-bottom" style="width:30vw;">
            <el-button type="primary" size="small" @click="submit">确认并提交</el-button>
        </div>
    </el-form>
</el-drawer>
</template>

<script>
import {
    createInviteApi,
} from "@/api/customer/invite.js";

// picker
import pickerView from '@/components/picker/select.vue'

const ruleForm = {
    id: '',
    member_id: '',
    store_id: '', // 门店
    invite_time: "", // 邀约时间
    remark: ""
};

export default {
    components: {
        pickerView,
    },
    inject: {
        pageIndex: {
            default: () => null
        },
        customerDetail: {
            default: () => null
        }
    },
    data() {
        return {
            formDrawer: {
                title: "添加进店",
                visible: false,
            },
            ruleForm: Object.assign({}, ruleForm),
            rules: {
                store_id: [{
                    required: true,
                    message: "请选择门店",
                    trigger: "change",
                }],
            },
        };
    },
    computed: {},
    methods: {
        showDrawer(allocate, customer) {
            this.ruleForm = Object.assign({}, ruleForm);
            this.ruleForm.member_id = customer.id;
            this.formDrawer.visible = true;
        },
        closeDrawer() {
            this.formDrawer.visible = false;
        },
      submit() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                   createInviteApi(this.ruleForm).then(res => {
                        if (res.code == 200) {
                            this.$message.success(res.msg);
                            this.closeDrawer();
                            this.$emit("refresh");

                        } else {
                            this.$message.error(res.msg);
                        }
                    });
                }
            });
        },
    },
};
</script>
